<template>
    <div class="main">
        <headNav title="上传头像"></headNav>
        <media ref="uploadImg" style="display: none"></media>
        <div v-if="imgDataSource.length == 0" @click="chooseImg" class="imgBox">
            <img v-if="headImg == 'null' || !headImg" src="@/assets/img/default_head.png" alt="">
            <img v-else :src="headImg" alt="" onerror="this.src = 'static/img/default_head.png'">
            <p class="mark">点击图片更换头像</p>
        </div>
        <div v-else @click="chooseImg" class="imgBox">
            <img :src="imgDataSource[imgDataSource.length-1]" alt="">
            <p class="mark">点击图片更换头像</p>
        </div>

        <div class="sureBtn" @click="sure">
            确定
        </div>
    </div>
</template>
<script>
import headNav from '@/components/headNav/headNav'
import media from '@/components/media'
export default {
    components: {
        headNav, media
    },
    computed: {
        headImg () {
            return this.$store.state.user.headImg  
        },
        imgData () {
            return this.$store.state.media.imgData
        },
        imgDataSource () {
            return this.$store.state.media.imgDataSource
        },
        roleCode () {
             return this.$store.state.user.roleCode
        }
    },
    data () {
        return {
           
        }
    },
    methods: {
        chooseImg () {
            this.$refs.uploadImg.chooseImage(1)
        },
        sure () {
            if (this.imgDataSource.length == 0) {
                this.$vux.toast.text('上传成功')
                this.$router.go(-1)
                return
            }
            this.$store.dispatch('media/upload').then(res => {
                this.changeHeadImg()
            })
        },
        changeHeadImg () {
            var params = {
                id: this.$store.getters['user/loginUserId'],
                param: {
                    imgUrl: this.imgData[this.imgDataSource.length-1]
                }
            }
            var roleName = ''
            if (this.roleCode == 'Parent')  roleName = 'ParentHeadImg'
            if (this.roleCode == 'Teacher') roleName = 'TeacherHeadImg'
            this.$store.dispatch('personInfo/' + roleName, params).then(
                res => {
                    this.$vux.toast.text('上传成功')
                    this.$store.state.user.headImg = this.imgData[this.imgDataSource.length-1]
                    this.$router.go(-1)
                }
            )
        }
    }
}
</script>
<style lang='less' scoped>
    .main{
        background: #fff;
    }
    .content{
        padding: 0 0.3rem;
    }
    .sureBtn{
        font-size: 0.36rem;
        width: 80%;
        margin: 1rem auto;
        text-align: center;
        background: #39A8F5;
        color: #fff;
        padding: 0.2rem 0;
        border-radius: 0.4rem;
    }
    .imgBox{
        margin: 0.2rem auto;
        width: 2rem;
        height: 2rem;
        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 0.1rem;
        }
        .mark{
            color: #999;
            font-size: 0.24rem;
            margin-top: 0.2rem;
            text-align: center;
        }
    }
</style>
